{% load i18n %}
{% if intro_list %}
<div class="row row-cards mb-4 mt-3">
  {% for intro in intro_list %}
  <div class="col-md-6 col-lg-3">
    <div class="card">
      <div class="card-body p-4 text-center">
        {% include "_profile_image.html" with user=colleague big=True %}
        <h3 class="m-0 mb-1">{{ colleague.full_name }}</h3>
        {% if colleague.position != '' %}
        <div class="mt-3">
          <span class="badge bg-purple-lt">{{ colleague.position }}</span>
        </div>
        {% endif %}
      </div>
      <div class="d-flex">
        {% if colleague.email %}
        <a href="mailto:{{colleague.email}}" class="card-btn"><!-- Download SVG icon from http://tabler-icons.io/i/mail -->
          <svg xmlns="http://www.w3.org/2000/svg" class="icon me-2 text-muted" width="24" height="24" viewBox="0 0 24 24" stroke-width="2" stroke="currentColor" fill="none" stroke-linecap="round" stroke-linejoin="round"><path stroke="none" d="M0 0h24v24H0z" fill="none"></path><rect x="3" y="5" width="18" height="14" rx="2"></rect><polyline points="3 7 12 13 21 7"></polyline></svg>
          {% translate "Email" %}</a>
        {% endif %}
        {% if colleague.phone %}
        <a href="tel:{{colleague.phone}}" class="card-btn"><!-- Download SVG icon from http://tabler-icons.io/i/phone -->
          <svg xmlns="http://www.w3.org/2000/svg" class="icon me-2 text-muted" width="24" height="24" viewBox="0 0 24 24" stroke-width="2" stroke="currentColor" fill="none" stroke-linecap="round" stroke-linejoin="round"><path stroke="none" d="M0 0h24v24H0z" fill="none"></path><path d="M5 4h4l2 5l-2.5 1.5a11 11 0 0 0 5 5l1.5 -2.5l5 2v4a2 2 0 0 1 -2 2a16 16 0 0 1 -15 -15a2 2 0 0 1 2 -2"></path></svg>
          {% translate "Call" %}</a>
        {% endif %}
      </div>
    </div>
  </div>

  {% endfor %}
</div>
{% endif %}
<div class="row row-cards mb-4 mt-3" id="search-results">
  {% for colleague in object_list %}
  <div class="col-md-6 col-lg-3">
    <div class="card">
      <div class="card-body p-4 text-center">
        {% include "_profile_image.html" with user=colleague big=True %}
        <h3 class="m-0 mb-1"><a href="#">{{ colleague.full_name }}</a></h3>
        {% if colleague.position != '' %}
        <div class="mt-3">
          <span class="badge bg-purple-lt">{{ colleague.position }}</span>
        </div>
        {% endif %}
      </div>
      <div class="d-flex">
        {% if colleague.email %}
        <a href="mailto:{{colleague.email}}" class="card-btn"><!-- Download SVG icon from http://tabler-icons.io/i/mail -->
          <svg xmlns="http://www.w3.org/2000/svg" class="icon me-2 text-muted" width="24" height="24" viewBox="0 0 24 24" stroke-width="2" stroke="currentColor" fill="none" stroke-linecap="round" stroke-linejoin="round"><path stroke="none" d="M0 0h24v24H0z" fill="none"></path><rect x="3" y="5" width="18" height="14" rx="2"></rect><polyline points="3 7 12 13 21 7"></polyline></svg>
          {% translate "Email" %}</a>
        {% endif %}
        {% if colleague.phone %}
        <a href="tel:{{colleague.phone}}" class="card-btn"><!-- Download SVG icon from http://tabler-icons.io/i/phone -->
          <svg xmlns="http://www.w3.org/2000/svg" class="icon me-2 text-muted" width="24" height="24" viewBox="0 0 24 24" stroke-width="2" stroke="currentColor" fill="none" stroke-linecap="round" stroke-linejoin="round"><path stroke="none" d="M0 0h24v24H0z" fill="none"></path><path d="M5 4h4l2 5l-2.5 1.5a11 11 0 0 0 5 5l1.5 -2.5l5 2v4a2 2 0 0 1 -2 2a16 16 0 0 1 -15 -15a2 2 0 0 1 2 -2"></path></svg>
          {% translate "Call" %}</a>
        {% endif %}
      </div>
    </div>
  </div>
  {% empty %}
  <div class="col-12">
    <div class="card">
      <div class="card-body p-4 text-center">
        {% translate "No search results found" %}
      </div>
    </div>
  </div>
  {% endfor %}
</div>
{% include '_paginator.html' %}
